<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="page-view-size" content="1280*720">
  <link rel="stylesheet" href="styles/base.css">
  <title>熊猫部落-剧情详情</title>
  <style>
    body {
      position: absolute;
      margin: 0;
      padding: 0;
      width: 1280px;
      height: 720px;
      background: url(images/series-bg.png);
      background-color: transparent;
    }

    #main-0 {
      position: absolute;
      width: 564px;
      height: 320px;
      top: 81px;
      left: 81px;
    }

    #series-container {
      position: absolute;
      left: 670px;
      top: 80px;
      width: 530px;
      color: #fff;
    }

    #title {
      font-size: 26px;
      padding: 0 0 15px 0;
      max-height: 70px;
      line-height: 30px;
      overflow: hidden;
    }

    #detail {
      font-size: 18px;
      line-height: 24px;
      height: 96;
      overflow: hidden;
    }

    #series-list {
      position: absolute;
      left: 80px;
      top: 430px;
      color: #fff;
    }

    #series-list .title {
      font-size: 26px;
    }

    #big-num-list {
      width: 1120px;
      padding-top: 10px;
      height: 30px;
      position: relative;
      overflow: hidden;
    }

    #big-num-list .item {
      display: inline-block;
      margin: 0 15px 0 0;
      font-size: 24px;
      line-height: 30px;
      height: 30px;
      text-align: center;
    }

    #big-num-list .item.active {
      color: #5bb4ff;
    }

    #big-num-list .item.focus {
      color: #5bb4ff;
      font-weight: bold;
    }

    #small-num-list .item {
      position: absolute;
      width: 102px;
      height: 57px;
      line-height: 57px;
      text-align: center;
      background: url(images/series-list.png);
      font-size: 24px;
    }

    #small-num-list .item.focus {
      background: url(images/series-list-focus.png);
    }

    #main-1 img {
      display: inline-block;
      vertical-align: middle;
      margin-top: -5px;
      margin-right: 8px;
    }

    #main-1 .item {
      position: absolute;
      width: 143px;
      height: 48px;
      line-height: 48px;
      font-size: 20px;
      color: #fff;
      background: url(images/series-btn-bg.png);
      text-align: center;
    }

    #main-1 .item.focus {
      background: url(images/series-btn-bg-focus.png);
    }

    #small-num-list .free {
      position: absolute;
      width: 48px !important;
      height: 45px !important;
      background: url(images/free-icon.png);
      right: -7px;
      top: -20px;
    }

    #small-num-list .show-free .free {
      display: block;
    }

    #main-1-1 {
      left: 163px;
    }

    #ad {
      width: 526px;
      height: 70px;
      margin: 10px 0;
    }

    #ad img {
      display: block;
    }

    #look {
      font-size: 12px;
      color: #fff;
      position: absolute;
      left: 10px;
      top: 5px;
    }
  </style>
</head>

<body onload="init()" onunload="exit()">
  <div id="main-0" class="item-focus">
    <div id="look"></div>
  </div>
  <div id="series-container">
    <div id="title"></div>
    <div id="detail"></div>
    <div style="position:relative;">
      <div id="ad">
        <!-- <img src="images/template/ad.png" alt=""> -->
      </div>
      <div id="main-1">
        <div id="main-1-0" class="item">
          <img src="images/un-favorite-icon.png" alt="">
          收藏
        </div>
        <div id="main-1-1" class="item">
          <img src="images/order-icon.png" alt=""> 订购</div>
      </div>
    </div>
  </div>
  <div id="series-list">
    <div class="title">剧集列表</div>
    <div id="big-num-list">
      <div id="big-num-list-view" style="position: relative;"></div>
    </div>
    <div id="small-num-list" style="position: relative;top: 20px;"></div>
  </div>


</body>
<script src="js/jquery.js"></script>
<script src="config/index.js?v=1"></script>
<script src="api/index.js?v=1"></script>
<script src="js/KeyEvent.js?v=12"></script>
<script src="js/event.js?v=12"></script>
<script src="js/utli.js?v=12"></script>
<script src="js/base.js"></script>
<script src="js/mediaplayer.js"></script>
<script src="js/promise.min.js"></script>

<script>
  var area = [{
    id: 'main-',
    index: 0
  }, {
    id: 'main-1-',
    index: 0
  }, {
    id: 'big-num-',
    index: 0
  }, {
    id: 'small-num-list-',
    index: 0
  }];
  var diff = 20;
  var totalPage = -1;
  var remainder = -1;
  var currentVideoIndex = 0;
  var lookTime = 15;
  var lookTimer = null;
  var mp = null;
  var domain = getDomain().domain;
  var sitcomList = [];


  // 页面初始化
  function init() {
    initMediaPlay();
    getFilmDate();
    startTime = new Date().getTime();
    getPreFocus();
    getDetail();
    renderAd();
  }



  function renderAd() {
    var data = getTypeListByTypeId({
      TYPEID: TYPEIDS.AD
    }).TYPEs;
    if (data.length > 0) {
      $('#ad').html('<img src="' + data[0].typePicture[0].picPath3 + '"/>')
    }
  }

  function goUtility() {
    clearTimer();
    endTime = new Date().getTime();
    getLog({
      programId: detail.sitcomList[currentVideoIndex].ID,
      programName: detail.sitcomList[currentVideoIndex].name,
      ctype: '2',
      account: USERID,
      usermac: MAC,
      startTime: startTime,
      endTime: endTime,
      platform: '1'
    })
    startTime = new Date().getTime();
    currentVideoIndex++;
    currentVideoIndex = currentVideoIndex % sitcomList.length;
    getPlayUrl(sitcomList[currentVideoIndex % sitcomList.length].code);
  }


  function getDetail() {
    detail = getVodDetailInfo({
      VODID: vodid
    });
    var total = 0;
    // $('#title').html(detail.name);
    //  = detail.sitcomList;
    if (detail.isFav == 0) {
      $('#main-1-0').html('<img src = "images/un-favorite-icon.png">收藏')
    } else if (detail.isFav == 1) {
      $('#main-1-0').html('<img src = "images/favorite-icon.png">已收藏')
    }
    sitcomList = detail.sitcomList
    if (isSub == 0) {
      $('#main-1-1').remove();
      $('#look').html('');
    } else {
      for (var i = 0; i < sitcomList.length; i++) {
        if (sitcomList[i].charge == 0) {
          total++;
        }
      }
      if (total > 0) {
        $('#look').html('您没有订购当前节目，可以免费观看前' + total + '集');
      }

      if (detail.charge == 0) {
        $('#main-1-1').remove();
        $('#look').html('');
      }

    }
    $('#detail').html(detail.introduce);
    renderSeriesList(detail.sitcomList.length);
    getPlayUrl(sitcomList[currentVideoIndex].code)
  }


  // 获取url参数
  function getPreFocus() {
    var url = window.location.href;
    focusArea = parseInt(GY.getURLParameter("AREA", url) != "" ? GY.getURLParameter(
      "AREA", url) : 0);
    area[focusArea].index = parseInt(GY.getURLParameter("INDEX", url) != "" ? GY.getURLParameter(
      "INDEX", url) : 0);
    nav = parseInt(GY.getURLParameter("NAV", url) != "" ? GY.getURLParameter(
      "NAV", url) : 0);
    vodid = GY.getURLParameter("VODID", url) != "" ? GY.getURLParameter(
      "VODID", url) : '';
    num = parseInt(GY.getURLParameter("NUM", url) != "" ? GY.getURLParameter(
      "NUM", url) : 0);
  }


  // 切换大列表索引
  function checkMark(nav) {
    $('#big-num-list-view .item').eq(nav).addClass('active').siblings('.item').removeClass('active');
    renderIndexList(nav);
  }

  // 切换小列表索引
  function renderIndexList(nav) {
    if (focusArea == 3) {
      area[3].index = num;
    } else {
      area[3].index = 0;
    }

    var html = '';
    var len = -1;
    var w = 102 + 10;
    var h = 57 + 10;
    var _diff = 10;

    if (nav == (totalPage - 1)) {
      len = remainder;
    } else {
      len = diff;
    }
    for (var i = 0; i < len; i++) {

      var chargeHtml = '';
      if (sitcomList[nav * 20 + i].charge == 0) {
        chargeHtml = '<div class="free"></div>'
      }
      // if()
      var style = 'left:' + (i % _diff) * w + 'px;top: ' + Math.floor(i / _diff) * h + 'px';
      html += '<div id="small-num-list-' + i + '" class="item" style="' + style + '">' + ((
        nav *
        20) + (i + 1)) + chargeHtml + '</div>'
    }
    $('#small-num-list').html(html);
    onFocus();
  }


  // 计算剧集列表
  function renderSeriesList(index) {
    var width = 80;
    var html = '';
    totalPage = Math.ceil(index / diff);
    remainder = index % 20;
    if (!index) return;
    for (var i = 0; i < totalPage; i++) {
      var context = '';
      if (i == (totalPage - 1)) {
        // 单集显示
        if (remainder == 1) {
          context = index;
        } else {
          // 最后一个列表
          context = ((i * 20) + 1) + '-' + index
        }
      } else {
        context = ((i * 20) + 1) + '-' + (i + 1) * 20
      }

      html += '<div id="big-num-' + i + '" class="item">' + context + '</div>';

    }
    $('#big-num-list-view').html(html);
    checkMark(nav)
  }


  // 上键操作
  function keyUp() {
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 2:
        focusArea = 0;
        break;
      case 3:
        if (index > 9) {
          area[focusArea].index -= 10;
        } else {
          focusArea = 2;
        }
        break;
    }
    onFocus()
  }

  // 下键操作
  function keyDown() {
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 0:
        focusArea = 2;
        break;
      case 1:
        focusArea = 2;
        break;
      case 2:
        focusArea = 3;
        break;
      case 3:
        index += 10;
        if ($('#' + area[focusArea].id + index).length > 0) {
          area[focusArea].index += 10;
        }
        break;
    }
    onFocus()
  }

  // 左键操作
  function keyLeft() {
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 1:
        if (index > 0) {
          area[focusArea].index--;
        } else {
          focusArea = 0
        }
        break;
      case 2:
        if (nav > 0) {
          nav--;
          area[focusArea].index--;
          checkMark(nav);
        }
        break;
      case 3:
        if (index % 10 != 0) {
          area[focusArea].index--;
        }
        break;
    }
    onFocus()
  }

  // 右键操作
  function keyRight() {
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 0:
        focusArea = 1;
        area[focusArea].index = 0;
        break;
      case 1:
        index++;
        if ($('#' + area[focusArea].id + index).length > 0) {
          area[focusArea].index++;
        }
        break;
      case 2:
        if ((totalPage - 1) > nav) {
          nav++;
          area[focusArea].index++;
          checkMark(nav);
        }
        break;
      case 3:
        index++;
        if (index % 10 != 0 && $('#' + area[focusArea].id + index).length > 0) {
          area[focusArea].index++;
        }
        break;
    }
    onFocus()
  }

  // 回车键操作
  function keyEnter() {
    var index = area[focusArea].index;
    var form = PANDA_PATH + "series.html?AREA=" + focusArea + "&INDEX=" + area[focusArea].index + '&NAV=' +
      nav + '&VODID=' + vodid + '&NUM=' + area[3].index;
    switch (focusArea) {
      case 0:
        if (sitcomList[index].charge == 0) {
          GY.addUrl(PANDA_PATH + 'vod-play.html?VODID=' + vodid + '&VIDEO_INDEX=' + index, form);
        } else {
          if (isSub == 1 || isSub == 5 || isSub == 98) {
            GY.addUrl(PANDA_PATH + 'order-list.html?vodId=' + detail.ID + '&mediaCode=' + detail.code + '&returnUrl=' +
              escape(form));
          } else {
            GY.addUrl(PANDA_PATH + 'vod-play.html?VODID=' + vodid + '&VIDEO_INDEX=' + index, form);
          }
        }
        break;
      case 1:
        if (index == 0) {
          toggleFav();
        } else if (index == 1) {
          form = PANDA_PATH + 'series.html?AREA=0&INDEX=0&NAV=0&VODID=' + vodid + '&NUM=0';
          GY.addUrl(PANDA_PATH + 'order-list.html?vodId=' + detail.ID + '&mediaCode=' + detail.code + '&returnUrl=' +
            escape(form));
        }
        break;
      case 3:
        var index = nav * 20 + index;
        if (sitcomList[index].charge == 0) {
          GY.addUrl(PANDA_PATH + 'vod-play.html?VODID=' + vodid + '&VIDEO_INDEX=' + index, form);
        } else {
          if (isSub == 1 || isSub == 5 || isSub == 98) {
            GY.addUrl(PANDA_PATH + 'order-list.html?vodId=' + detail.ID + '&mediaCode=' + detail.code + '&returnUrl=' +
              escape(form));
          } else {
            GY.addUrl(PANDA_PATH + 'vod-play.html?VODID=' + vodid + '&VIDEO_INDEX=' + index, form);
          }
        }
        break;
    }

  }

  function toggleFav() {
    if (detail.isFav == 0) { // 未收藏
      var code = addFavorite(detail.ID, detail.name).code;
      if (code == 200) {
        detail.isFav = 1;
        $('#main-1-0').html('<img src = "images/favorite-icon.png">已收藏')
        // renderBtn()
      }
    } else if (detail.isFav == 1) { // 已收藏
      var code = delFavorite(detail.ID).code;
      if (code == 200) {
        detail.isFav = 0;
        $('#main-1-0').html('<img src = "images/un-favorite-icon.png">收藏')
        // renderBtn()
      }
    }
  }

  // 返回键操作
  function keyBack() {
    if (mp) {
      destroy()
    }
    endTime = new Date().getTime();
    getLog({
      programId: detail.sitcomList[currentVideoIndex].ID,
      programName: detail.sitcomList[currentVideoIndex].name,
      ctype: '2',
      account: USERID,
      usermac: MAC,
      startTime: startTime,
      endTime: endTime,
      platform: '1'
    })
    GY.goback();
  }

  // 页面退出
  function exit() {

  }

  // 落焦
  function onFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.addClass('focus');
  }

  // 失焦 
  function freeFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.removeClass('focus');
  }

  function initMediaPlay(vodPlayUrl) {
    if (mp) {
      destroy()
    }
    mp = new MediaPlayer();
    var instanceId = mp.getNativePlayerInstanceID();
    var playListFlag = 0;
    var videoDisplayMode = 0;
    var height = 322;
    var width = 568;
    var left = 80;
    var top = 80;
    var muteFlag = 0;
    var useNativeUIFlag = 1;
    var subtitleFlag = 0;
    var videoAlpha = 0;
    var cycleFlag = 0;
    var randomFlag = 0;
    var autoDelFlag = 0;
    var mediaStr = '[{mediaUrl:"' + vodPlayUrl + '",' +
      'mediaCode: "jsoncode1",' +
      'mediaType:2,' +
      'audioType:1,' +
      'videoType:1,' +
      'streamType:1,' +
      'drmType:1,' +
      'fingerPrint:0,' +
      'copyProtection:1,' +
      'allowTrickmode:1,' +
      'startTime:0,' +
      'endTime:20000,' +
      'entryID:"jsonentry1"}]';
    mp.initMediaPlayer(instanceId, playListFlag, videoDisplayMode, height, width, left, top, muteFlag,
      useNativeUIFlag,
      subtitleFlag, videoAlpha, cycleFlag, randomFlag, autoDelFlag);

    mp.setSingleMedia(mediaStr); //设置媒体播放器播放媒体内容
    mp.setAllowTrickmodeFlag(0); //设置是否允许trick操作。 0:允许 1：不允许
    mp.setNativeUIFlag(0); //播放器是否显示缺省的Native UI，  0:允许 1：不允许
    mp.setAudioTrackUIFlag(1); //设置音轨的本地UI显示标志 0:不允许 1：允许
    mp.setMuteUIFlag(1); //设置静音的本地UI显示标志 0:不允许 1：允许
    mp.setAudioVolumeUIFlag(1); //设置音量调节本地UI的显示标志 0:不允许 1：允许
    mp.setCycleFlag(1); //这句神奇的代码用于解决电视剧连续播放的问题
    mp.refreshVideoDisplay();
  }

  function destroy() {
    var nativePlayerInstanceID = mp.getNativePlayerInstanceID();
    mp.stop();
    mp.releaseMediaPlayer(nativePlayerInstanceID)
  }

  function getPlayUrl(mediaCode) {
    var url = domain + '/datajsp/play_getVodPlayUrl.jsp?mediaCode=' + mediaCode;
    $.get(url, function (data) {
      var data = eval('(' + data + ')');
      if (data.playUrl) {
        initMediaPlay(data.playUrl);
        play()
      }
    })
  }

  function play() {
    mp.playByTime(1, 0);
    // if (isSub == 1 || isSub == 5 || isSub == 98) {
    //   for (var i = 0, l = sitcomList.length; i < l; i++) {
    //     if (sitcomList[i].charge == 0) {
    //       videos.push(sitcomList[i])
    //     }
    //   }
    //   $('#look').html('您没有订购当前节目，可以免费观看前' + videos.length + '集');
    // } else {
    //   videos = sitcomList;
    //   $('#look').html('')
    // }


    // if (sitcomList[currentVideoIndex].charge == 0) {
    //   mp.playByTime(1, 0);
    //   $('#look').html('');
    // } else {

    //   if (isSub == 1 || isSub == 5 || isSub == 98) {
    //     mp.playByTime(1, 15);
    //     showLook();
    //   } else {
    //     mp.playByTime(1, 0);
    //     $('#look').html('');
    //   }
    // }
  }
</script>

</html>